<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 700px;
            height: 525px;
        }
    </style>
</head>
<body>
     <div id="box">
        <img src="image/1.jpg" alt="">
     </div>
     <script>
         var img = document.getElementsByTagName("img")[0];
         var box = document.getElementById("box");
         //因为考虑需要切换图片有可能名称不规则，所以建议存储到数组中 
         var arr = [
             'image/1.jpg',
             'image/2.jpg',
             'image/3.jpg',
             'image/4.jpg'
         ]
         //2、延迟3s换下一张图
         var timer = setInterval(autoNext,3000); // 1
         //3、模拟数组中的下标值
         var n = 0;
         function autoNext(){
             n++;
             if(n==arr.length){
                 n = 0;
             }
            //  console.log(arr[n]);
            img.src = arr[n];
         }
         //4、鼠标移入到box盒子区域，停止定时器
         box.onmouseover = function(){
             clearInterval(timer);
         }
         //5、鼠标离开box盒子区域，定时器继续
         box.onmouseout = function(){
            timer = setInterval(autoNext,3000); 
            console.log(timer);
         }
     </script>
</body>
</html>